<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <title>UNIS Design System v4</title>
    <meta name="author" content="">
    <meta name="generator" content="">
    <link rel="stylesheet" href="../styles/bootstrap.css">
    <link rel="stylesheet" href="../styles/global.css">
    <link rel="stylesheet" href="css/unis.css">
    <script src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/nav.js"></script>
    <script type="text/javascript" src="../js/vue.js"></script>
    <link href="../styles/monokai_sublime.min.css" rel="stylesheet">
   </head>
<body>

<div class="container-fluid">
       <div class="row bg-pearl-blue" style="padding-top: 15px;">
        <div class="col-8">
            <h2 class="primary">05. UI Elements / Modals</h2>
            <p style="padding-left: 46px;"> Table Core Styles Depend On Bootstrap. Refer To Bootstrap.Css First</p>
            <p style="padding-left: 24px;"></p>
        </div>
        <div class="col-4" style="text-align: right; padding-top: 30px;">

        </div>
    </div>
    <div class="d-flex align-items-stretch" id="app">
        <div class="col isolation">
            <div>
                <div>
                    <h2>Navigation Bars</h2>
                    <p></p>
                    <hr>
                </div>
                <div v-for="(list,index) in navigationBars" :id="'navigationBars'+index">
                    <div>
                        <h4 v-html="list.name"></h4>
                        <p>&nbsp;</p>
                    </div>
                    <div class="btn-code">
                        <div class="code-label blue">
                            <div class="unis-arrow left "></div>
                            <div class="unis-arrow right "></div>
                        </div>
                        <input type="checkbox" class="code-input ">
                        <div class="card">
                            <div class="card-header">Example</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col" v-for="item in list.list"
                                         :style="{'height':item.height}">
                                        <div v-if="item.lable" v-html="item.lable"></div>
                                        <div v-html="item.html" :style="{'height':item.height}"></div>
                                    </div>
                                </div>
                                <div style="margin-top: 15px; " v-if="list.replenish"></div>
                                <div class="row" v-if="list.replenish">
                                    <div class="col" v-for="item in list.replenish"
                                         :style="{'height':item.height}">
                                        <div v-if="item.lable" v-html="item.lable"></div>
                                        <div v-html="item.html" :style="{'height':item.height}"></div>
                                    </div>
                                </div>
                                <div class="row xmp" style="margin-top: 50px;">
                                    <div class="col " v-for="item in list.list">
                                       <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>
                                <div class="row xmp" v-if="list.replenish" style="margin-top: 50px;">
                                    <div class="col " v-for="item in list.replenish">
                                       <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <h2>Calendar</h2>
                    <p></p>
                    <hr>
                </div>
                <div v-for="(list,index) in calendars" :id="'calendars'+index">
                    <div>
                        <h3 v-html="list.name"></h3>
                        <p>&nbsp;</p>
                    </div>
                    <div class="btn-code">
                        <div class="code-label blue">
                            <div class="unis-arrow left "></div>
                            <div class="unis-arrow right "></div>
                        </div>
                        <input type="checkbox" class="code-input ">
                        <div class="card">
                            <div class="card-header">Example</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col" v-for="item in list.list"
                                         :style="{'height':item.height}">
                                        <div v-if="item.lable" v-html="item.lable"></div>
                                        <div v-html="item.html" :style="{'height':item.height}"></div>
                                    </div>
                                </div>
                                <div style="margin-top: 15px; " v-if="list.replenish"></div>
                                <div class="row" v-if="list.replenish">
                                    <div class="col" v-for="item in list.replenish"
                                         :style="{'height':item.height}">
                                        <div v-if="item.lable" v-html="item.lable"></div>
                                        <div v-html="item.html" :style="{'height':item.height}"></div>
                                    </div>
                                </div>
                                <div class="row xmp">
                                    <div class="col " v-for="item in list.list">
                                       <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>
                                <div class="row xmp" v-if="list.replenish"
                                     :style="{'marginTop':list.replenish? '0px':''}">
                                    <div class="col " v-for="item in list.replenish">
                                       <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <h2>Other UI Elements</h2>
                    <p></p>
                    <hr>
                </div>
                <div v-for="(list,index) in otheruielements" :id="'otheruielements'+index">
                    <div>
                        <h3 v-html="list.name"></h3>
                        <p>&nbsp;</p>
                    </div>
                    <div class="btn-code">
                        <div class="code-label blue">
                            <div class="unis-arrow left "></div>
                            <div class="unis-arrow right "></div>
                        </div>
                        <input type="checkbox" class="code-input ">
                        <div class="card">
                            <div class="card-header">Example</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col" v-for="item in list.list"
                                         :style="{'height':item.height}">
                                        <div v-if="item.lable" v-html="item.lable"></div>
                                        <div v-html="item.html" :style="{'height':item.height}"></div>
                                    </div>
                                </div>
                                <div style="margin-top: 15px; " v-if="list.replenish"></div>
                                <div class="row" v-if="list.replenish">
                                    <div class="col" v-for="item in list.replenish"
                                         :style="{'height':item.height}">
                                        <div v-if="item.lable" v-html="item.lable"></div>
                                        <div v-html="item.html" :style="{'height':item.height}"></div>
                                    </div>
                                </div>
                                <div class="row xmp">
                                    <div class="col " v-for="item in list.list">
                                       <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>
                                <div class="row xmp" v-if="list.replenish"
                                     :style="{'marginTop':list.replenish? '0px':''}">
                                    <div class="col " v-for="item in list.replenish">
                                       <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div>
                <div>
                    <h2>Table (Condensed)</h2>
                    <p></p>
                    <hr>
                </div>
                <div v-for="(list,index) in tables" :id="'tables'+index">
                    <div>
                        <h4 v-html="list.name"></h4>
                        <p>&nbsp;</p>
                    </div>
                    <div class="btn-code">
                        <div class="code-label blue">
                            <div class="unis-arrow left "></div>
                            <div class="unis-arrow right "></div>
                        </div>
                        <input type="checkbox" class="code-input ">
                        <div class="card">
                            <div class="card-header">Example</div>
                            <div class="card-body">
                                <div class="row">
                                    <div class="col" v-for="item in list.list"
                                         :style="{'height':item.height}">
                                        <div v-if="item.lable" v-html="item.lable"></div>
                                        <div v-html="item.html" :style="{'height':item.height}"></div>
                                    </div>
                                </div>
                                <div style="margin-top: 15px; " v-if="list.replenish"></div>
                                <div class="row" v-if="list.replenish">
                                    <div class="col" v-for="item in list.replenish"
                                         :style="{'height':item.height}">
                                        <div v-if="item.lable" v-html="item.lable"></div>
                                        <div v-html="item.html" :style="{'height':item.height}"></div>
                                    </div>
                                </div>
                                <div class="row xmp">
                                    <div class="col " v-for="item in list.list">
                                       <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>
                                <div class="row xmp" v-if="list.replenish"
                                     :style="{'marginTop':list.replenish? '0px':''}">
                                    <div class="col " v-for="item in list.replenish">
                                       <pre class="mxScroll">
                                    <code class="lang-javascript html code" v-html="item.html">
                                    </code>
                                   </pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="col leftnavHeight">
            <div id="navHeight" class="nav">
                <nav class="nav-wrap navFix leftNavFix" id="nav-wrap">
                    <div class="nav-Form" style="cursor: pointer"><i class="unis-tian unis-icon" style="margin-right: 15px; "></i>
                        Navigation Bars
                    </div>
                    <ul class="clearfix">
                        <li v-for="(titles,index) in navigationBars">
                            <a :href="'#navigationBars'+index" v-html="titles.name"></a>
                        </li>
                    </ul>
                    <div class="nav-Form" style="cursor: pointer"><i class="unis-tian unis-icon" style="margin-right: 15px; "></i>
                        Calendar
                    </div>
                    <ul class="clearfix">
                        <li v-for="(titles,index) in calendars">
                            <a :href="'#calendars'+index" v-html="titles.name"></a>
                        </li>
                    </ul>
                    <div class="nav-Form" style="cursor: pointer"><i class="unis-tian unis-icon" style="margin-right: 15px; "></i>
                        Other UI Elements
                    </div>
                    <ul class="clearfix">
                        <li v-for="(titles,index) in otheruielements">
                            <a :href="'#otheruielements'+index" v-html="titles.name"></a>
                        </li>
                    </ul>
                    <div class="nav-Form" style="cursor: pointer"><i class="unis-tian unis-icon" style="margin-right: 15px; "></i>
                        Table (Condensed)
                    </div>
                    <ul class="clearfix">
                        <li v-for="(titles,index) in tables">
                            <a :href="'#tables'+index" v-html="titles.name"></a>
                        </li>
                    </ul>


                </nav>
            </div>
        </div>

    </div>
</div>
<script src="../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../js/nav.js"></script>
<script src="../js/beautify2.js" type="text/javascript"></script>
<script src="../js/beautify-css2.js" type="text/javascript"></script>
<script src="../js/beautify-html2.js" type="text/javascript"></script>
<script src="../js/highlight.min.js"></script>
<script type="text/javascript">
    Vue.config.debug = true;
    app = new Vue({
        el: "#app",
        data: {
            navigationBars: [
                {
                    name: 'Top Nav ',
                    list: [{
                        lable: 'Default  ',
                        height:'300px',
                        html: '<div class="unis-header">' +
                        '<div class="nav"><i class="unis-apps unis-icon"></i>Apps <i class="unis-arrow unis-icon"></i>' +
                        '<div class="drop-box">' +
                        '<ul>' +
                        '<li><a href=""><i class="unis-transportation unis-icon"></i>Transportation</li></a>' +
                        '<li><a href=""><i class="unis-warehouse unis-icon"></i>Warehouse</li></a>' +
                        '<li><button><i class="unis-field-service unis-icon"></i>Field Service</li></button>' +
                        '<li><button><i class="unis-returns unis-icon"></i>Returns</li></button>' +
                        '</ul>' +
                        '</div>' +
                        '</div>' +
                        '<div class="nav not"><i class="unis-tool unis-icon"></i>Tools <i class="unis-arrow unis-icon"></i>' +
                        '<div class="drop-box">' +
                        '<ul>' +
                        '<li>Sorry! This Feature Is Not Available Yet.</li>' +
                        '</ul>' +
                        '</div>' +
                        '</div>' +
                        '<div class="nav not"><i class="unis-analytics unis-icon"></i>Analytics <i class="unis-arrow unis-icon"></i>' +
                        '<div class="drop-box left">' +
                        '<ul>' +
                        '<li>Sorry! This Feature Is Not Available Yet.</li>' +
                        '</ul>' +
                        '</div>' +
                        '</div>' +
                        '<div class="user accents-bg">js' +
                        '<div class="drop-box">' +
                        '<ul>' +
                        '<li><div class="head"></div>Jessica Chen</li>' +
                        '<li><button>My Profile</button></li>' +
                        '<li><button>Technical Support</button></li>' +
                        '<li><button>Settings</button></li>' +
                        '<li><button>Log Out</button></li>' +
                        '</ul>' +
                        '</div>' +
                        '</div>' +
                        '</div> '

                    }]
                },
                {
                    name: 'WMS Submenu Expanded',
                    list: [
                        {
                            lable: ' &nbsp; ',
                            height:'624px',
                            html: '<div class="unis-aside shrink" >' +
                            '<div class="logo-box">' +
                            '<div class="spread" onclick="shoucang(this)">' +
                            '<i></i>' +
                            '</div>' +
                            '<i class="unis-unis unis-icon logo"></i>' +
                            '</div>' +
                            '<span class="project-name">WAREHOUSE</span>' +
                            '<span class="project-name-shrink">WMS</span>' +
                            '<ul>' +
                            '<li>' +
                            '<input type="radio" name="navs">' +
                            '<i class="active_bg unis-icon"></i>' +
                            '<i class="bors unis-icon"></i>' +
                            '<i class="unis-r-inbound unis-icon">'+
                            '<span class="path1 white"></span>'+
                            '<span class="path2 blue"></span>'+
                            '</i>' +
                            'Inbound' +
                            '<i class="unis-arrow right unis-icon"></i>' +
                            '<ul>' +
                            '<li><div class="a"><i class="unis-plus nis-icon"></i>Add Receipt</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Inquiry</div></li>' +
                            '<li><div class="a active"><i class="circle unis-icon"></i>Add Receipt3</div></li>' +
                            '</ul>' +
                            '</li>' +
                            '<li>' +
                            '<input type="radio" name="navs">' +
                            '<i class="active_bg unis-icon"></i>' +
                            '<i class="bors unis-icon"></i>' +
                            '<i class="unis-l-inbound unis-icon"></i>' +
                            'Outbound' +
                            '<i class="unis-arrow right unis-icon"></i>' +
                            '<ul>' +
                            '<li><div class="a"><i class="unis-plus unis-icon"></i>Add Receipt</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Inquiry</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Add Receipt3</div></li>' +
                            '</ul>' +
                            '</li>' +
                            '<li>' +
                            '<input type="radio" name="navs">' +
                            '<i class="active_bg unis-icon"></i>' +
                            '<i class="bors unis-icon"></i>' +
                            '<i class="unis-Inventory unis-icon"></i>' +
                            'Inventory' +
                            '<i class="unis-arrow right unis-icon"></i>' +
                            '<ul>' +
                            '<li><div class="a"><i class="unis-plus unis-icon"></i>Add Receipt</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Inquiry</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Add Receipt3</div></li>' +
                            '</ul>' +
                            '</li>' +
                            '</ul>' +
                            '</div> '

                        },
                        {
                            lable: ' &nbsp; ',
                            height:'624px',
                            html: '<div class="unis-aside " >' +
                            '<div class="logo-box">' +
                            '<div class="spread" onclick="shoucang(this)">' +
                            '<i></i>' +
                            '</div>' +
                            '<i class="unis-unis logo unis-icon"></i>' +
                            '</div>' +
                            '<span class="project-name">WAREHOUSE</span>' +
                            '<span class="project-name-shrink">WMS</span>' +
                            '<ul>' +
                            '<li>' +
                            '<input type="radio" name="nav" checked>' +
                            '<i class="active_bg unis-icon"></i>' +
                            '<i class="bors unis-icon"></i>' +
                            '<i class="unis-r-inbound unis-icon">'+
                            '<span class="path1 white"></span>'+
                            '<span class="path2 blue"></span>'+
                            '</i>' +
                            'Inbound' +
                            '<i class="unis-arrow right unis-icon"></i>' +
                            '<ul>' +
                            '<li><div class="a"><i class="unis-plus unis-icon"></i>Add Receipt</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Inquiry</div></li>' +
                            '<li><div class="a active"><i class="circle unis-icon"></i>Add Receipt3</div></li>' +
                            '</ul>' +
                            '</li>' +
                            '<li>' +
                            '<input type="radio" name="nav">' +
                            '<i class="active_bg unis-icon"></i>' +
                            '<i class="bors unis-icon"></i>' +
                            '<i class="unis-l-inbound unis-icon"></i>' +
                            'Outbound' +
                            '<i class="unis-arrow right unis-icon"></i>' +
                            '<ul>' +
                            '<li><div class="a"><i class="unis-plus unis-icon"></i>Add Receipt</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Inquiry</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Add Receipt3</div></li>' +
                            '</ul>' +
                            '</li>' +
                            '<li>' +
                            '<input type="radio" name="nav">' +
                            '<i class="active_bg unis-icon"></i>' +
                            '<i class="bors unis-icon"></i>' +
                            '<i class="unis-Inventory unis-icon"></i>' +
                            'Inventory' +
                            '<i class="unis-arrow right unis-icon"></i>' +
                            '<ul>' +
                            '<li><div class="a"><i class="unis-plus unis-icon"></i>Add Receipt</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Inquiry</div></li>' +
                            '<li><div class="a"><i class="circle unis-icon"></i>Add Receipt3</div></li>' +
                            '</ul>' +
                            '</li>' +
                            '</ul>' +
                            '</div> '

                        }]
                },
            ],
            calendars: [
                {
                    name: 'Date Range Filter',
                    list: [
                        {
                            lable: 'Multi-Date Picker (For Filtering)',
                            height:'400px',
                            html: '<div class="unis-dates">' +
                            '<i class="unis-date unis-icon"></i>' +
                            'Dec 31, 2018 - Jan 30, 2019' +
                            '<div class="date-filter">' +
                            '<div class="date-box">' +
                            '<div class="date-view">' +
                            '<div class="operating-box">' +
                            '<div class="arrow-box left"></div>' +
                            'July 2018' +
                            '<div class="arrow-box right"></div>' +
                            '</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates weeks">M</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">W</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">F</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates day"><span>1</span></div>' +
                            '<div class="dates day"> <span>2</span></div>' +
                            '<div class="dates day"> <span>3</span></div>' +
                            '<div class="dates day"> <span>4</span></div>' +
                            '<div class="dates day"> <span>5</span></div>' +
                            '<div class="dates day"> <span>6</span></div>' +
                            '<div class="dates day"> <span>7</span></div>' +
                            '<div class="dates day"> <span>8</span></div>' +
                            '<div class="dates day"> <span>9</span></div>' +
                            '<div class="dates day"> <span>10</span></div>' +
                            '<div class="dates day scope pitch-on"><span>11</span></div>' +
                            '<div class="dates day scope"><span>12</span></div>' +
                            '<div class="dates day scope"><span>13</span></div>' +
                            '<div class="dates day scope"><span>14</span></div>' +
                            '<div class="dates day scope"><span>15</span></div>' +
                            '<div class="dates day scope"><span>16</span></div>' +
                            '<div class="dates day scope"><span>17</span></div>' +
                            '<div class="dates day scope"><span>18</span></div>' +
                            '<div class="dates day scope"><span>19</span></div>' +
                            '<div class="dates day scope"><span>20</span></div>' +
                            '<div class="dates day scope asingle"><span>21</span></div>' +
                            '<div class="dates day scope"><span>22</span></div>' +
                            '<div class="dates day scope"><span>23</span></div>' +
                            '<div class="dates day scope"><span>24</span></div>' +
                            '<div class="dates day scope"><span>25</span></div>' +
                            '<div class="dates day scope pitch-out"><span>26</span></div>' +
                            '<div class="dates day "><span>27</span></div>' +
                            '<div class="dates day "><span>28</span></div>' +
                            '<div class="dates day "><span>29</span></div>' +
                            '<div class="dates day "><span>30</span></div>' +
                            '<div class="dates "> <span>1</span></div>' +
                            '<div class="dates"><span>2</span></div>' +
                            '<div class="dates"><span>3</span></div>' +
                            '<div class="dates"><span>4</span></div>' +
                            '<div class="dates"><span>5</span></div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="operation-box">' +
                            '<button class="btn">Cancel</button>' +
                            '<button class="btn apply">Apply</button>' +
                            '</div>' +
                            '</div>' +
                            '</div>'

                        },]
                },
                {
                    name: 'Multi-Date Picker ',
                    list: [
                        {
                            lable: 'Multi-Date Picker (For Filtering)',
                            height:'400px',
                            html: '<div class="unis-dates">' +
                            '<i class="unis-date unis-icon"></i>' +
                            'Dec 31, 2018 - Jan 30, 2019' +
                            '<div class="date-filter">' +
                            '<div class="date-range">' +
                            'date-range' +
                            '<button class="unis-select multi" >'+
                            '<input type="button" value="07/10/2018 - 08/03/19">'+
                            '<ul>'+
                            '<li>Today</li>'+
                            '<li>Last 7 Days</li>'+
                            '<li>Last 30 Days</li>'+
                            '<li>Last Month</li>'+
                            '<li>Custom Range</li>'+
                            '</ul>'+
                            '</button>'+
                            '</div>' +
                            '<div class="date-box">' +
                            '<div class="date-view">' +
                            '<div class="operating-box">' +
                            '<div class="arrow-box left"></div>' +
                            'July 2018' +
                            '<div class="right"></div>' +
                            '</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates weeks">M</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">W</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">F</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates day"><span>1</span></div>' +
                            '<div class="dates day"><span>2</span></div>' +
                            '<div class="dates day"><span>3</span></div>' +
                            '<div class="dates day"><span>4</span></div>' +
                            '<div class="dates day"><span>5</span></div>' +
                            '<div class="dates day"><span>6</span></div>' +
                            '<div class="dates day"><span>7</span></div>' +
                            '<div class="dates day"><span>8</span></div>' +
                            '<div class="dates day"><span>9</span></div>' +
                            '<div class="dates day"><span>10</span></div>' +
                            '<div class="dates day scope pitch-on"><span>11</span></div>' +
                            '<div class="dates day scope"><span>12</span></div>' +
                            '<div class="dates day scope"><span>13</span></div>' +
                            '<div class="dates day scope"><span>14</span></div>' +
                            '<div class="dates day scope"><span>15</span></div>' +
                            '<div class="dates day scope"><span>16</span></div>' +
                            '<div class="dates day scope"><span>17</span></div>' +
                            '<div class="dates day scope"><span>18</span></div>' +
                            '<div class="dates day scope"><span>19</span></div>' +
                            '<div class="dates day scope"><span>20</span></div>' +
                            '<div class="dates day scope"><span>21</span></div>' +
                            '<div class="dates day scope"><span>22</span></div>' +
                            '<div class="dates day scope"><span>23</span></div>' +
                            '<div class="dates day scope"><span>24</span></div>' +
                            '<div class="dates day scope"><span>25</span></div>' +
                            '<div class="dates day scope pitch-out"><span>26</span></div>' +
                            '<div class="dates day "><span>27</span></div>' +
                            '<div class="dates day "><span>28</span></div>' +
                            '<div class="dates day "><span>29</span></div>' +
                            '<div class="dates day "><span>30</span></div>' +
                            '<div class="dates "> <span>1</span></div>' +
                            '<div class="dates"><span>2</span></div>' +
                            '<div class="dates"><span>3</span></div>' +
                            '<div class="dates"><span>4</span></div>' +
                            '<div class="dates"><span>5</span></div>' +
                            '</div>' +
                            '<div class="date-view">' +
                            '<div class="operating-box">' +
                            '<div class="left"></div>' +
                            'July 2018' +
                            '<div class="arrow-box right"></div>' +
                            '</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates weeks">M</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">W</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">F</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates "><span>28</span></div>' +
                            '<div class="dates "><span>29</span></div>' +
                            '<div class="dates "><span>30</span></div>' +
                            '<div class="dates day scope"><span>1</span></div>' +
                            '<div class="dates day scope"> <span>2</span></div>' +
                            '<div class="dates day scope pitch-out"> <span>3</span></div>' +
                            '<div class="dates day"> <span>4</span></div>' +
                            '<div class="dates day"> <span>5</span></div>' +
                            '<div class="dates day"> <span>6</span></div>' +
                            '<div class="dates day"> <span>7</span></div>' +
                            '<div class="dates day"> <span>8</span></div>' +
                            '<div class="dates day"> <span>9</span></div>' +
                            '<div class="dates day"> <span>10</span></div>' +
                            '<div class="dates day"><span>11</span></div>' +
                            '<div class="dates day"><span>12</span></div>' +
                            '<div class="dates day"><span>13</span></div>' +
                            '<div class="dates day"><span>14</span></div>' +
                            '<div class="dates day"><span>15</span></div>' +
                            '<div class="dates day"><span>16</span></div>' +
                            '<div class="dates day"><span>17</span></div>' +
                            '<div class="dates day"><span>18</span></div>' +
                            '<div class="dates day"><span>19</span></div>' +
                            '<div class="dates day"><span>20</span></div>' +
                            '<div class="dates day asingle"><span>21</span></div>' +
                            '<div class="dates day"><span>22</span></div>' +
                            '<div class="dates day"><span>23</span></div>' +
                            '<div class="dates day"><span>24</span></div>' +
                            '<div class="dates day"><span>25</span></div>' +
                            '<div class="dates day"><span>26</span></div>' +
                            '<div class="dates day"><span>27</span></div>' +
                            '<div class="dates day"><span>28</span></div>' +
                            '<div class="dates day"><span>29</span></div>' +
                            '<div class="dates day"><span>30</span></div>' +
                            '<div class="dates"> <span>1</span></div>' +
                            '<div class="dates"><span>2</span></div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="operation-box">' +
                            '<button class="btn">Cancel</button>' +
                            '<button class="btn apply">Apply</button>' +
                            '</div>' +
                            '</div>' +
                            '</div>'

                        },]
                },
                {
                    name: 'Multi-Date Picker(For Filtering)',
                    list: [
                        {
                            lable: 'Multi-Date Picker (For Filtering)',
                            height:'400px',
                            html: '<div class="unis-dates">' +
                            '<i class="unis-date unis-icon"></i>' +
                            'Dec 31, 2018 - Jan 30, 2019' +
                            '<div class="date-filter">' +
                            '<div class="date-range">' +
                            'date-range' +
                            '<button class="unis-select multi" >'+
                            '<input type="button" value="07/10/2018 - 08/03/19">'+
                            '<ul class="disblock">'+
                            '<li>Today</li>'+
                            '<li>Last 7 Days</li>'+
                            '<li>Last 30 Days</li>'+
                            '<li>Last Month</li>'+
                            '<li>Custom Range</li>'+
                            '</ul>'+
                            '</button>'+
                            '</div>' +
                            '<div class="date-box">' +
                            '<div class="date-view">' +
                            '<div class="operating-box">' +
                            '<div class="arrow-box left"></div>' +
                            'July 2018' +
                            '<div class="right"></div>' +
                            '</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates weeks">M</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">W</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">F</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates day"><span>1</span></div>' +
                            '<div class="dates day"><span>2</span></div>' +
                            '<div class="dates day"><span>3</span></div>' +
                            '<div class="dates day"><span>4</span></div>' +
                            '<div class="dates day"><span>5</span></div>' +
                            '<div class="dates day"><span>6</span></div>' +
                            '<div class="dates day"><span>7</span></div>' +
                            '<div class="dates day"><span>8</span></div>' +
                            '<div class="dates day"><span>9</span></div>' +
                            '<div class="dates day"><span>10</span></div>' +
                            '<div class="dates day scope pitch-on"><span>11</span></div>' +
                            '<div class="dates day scope"><span>12</span></div>' +
                            '<div class="dates day scope"><span>13</span></div>' +
                            '<div class="dates day scope"><span>14</span></div>' +
                            '<div class="dates day scope"><span>15</span></div>' +
                            '<div class="dates day scope"><span>16</span></div>' +
                            '<div class="dates day scope"><span>17</span></div>' +
                            '<div class="dates day scope"><span>18</span></div>' +
                            '<div class="dates day scope"><span>19</span></div>' +
                            '<div class="dates day scope"><span>20</span></div>' +
                            '<div class="dates day scope"><span>21</span></div>' +
                            '<div class="dates day scope"><span>22</span></div>' +
                            '<div class="dates day scope"><span>23</span></div>' +
                            '<div class="dates day scope"><span>24</span></div>' +
                            '<div class="dates day scope"><span>25</span></div>' +
                            '<div class="dates day scope pitch-out"><span>26</span></div>' +
                            '<div class="dates day "><span>27</span></div>' +
                            '<div class="dates day "><span>28</span></div>' +
                            '<div class="dates day "><span>29</span></div>' +
                            '<div class="dates day "><span>30</span></div>' +
                            '<div class="dates "> <span>1</span></div>' +
                            '<div class="dates"><span>2</span></div>' +
                            '<div class="dates"><span>3</span></div>' +
                            '<div class="dates"><span>4</span></div>' +
                            '<div class="dates"><span>5</span></div>' +
                            '</div>' +
                            '<div class="date-view">' +
                            '<div class="operating-box">' +
                            '<div class="left"></div>' +
                            'July 2018' +
                            '<div class="arrow-box right"></div>' +
                            '</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates weeks">M</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">W</div>' +
                            '<div class="dates weeks">T</div>' +
                            '<div class="dates weeks">F</div>' +
                            '<div class="dates weeks">S</div>' +
                            '<div class="dates "><span>28</span></div>' +
                            '<div class="dates "><span>29</span></div>' +
                            '<div class="dates "><span>30</span></div>' +
                            '<div class="dates day scope"><span>1</span></div>' +
                            '<div class="dates day scope"> <span>2</span></div>' +
                            '<div class="dates day scope pitch-out"> <span>3</span></div>' +
                            '<div class="dates day"> <span>4</span></div>' +
                            '<div class="dates day"> <span>5</span></div>' +
                            '<div class="dates day"> <span>6</span></div>' +
                            '<div class="dates day"> <span>7</span></div>' +
                            '<div class="dates day"> <span>8</span></div>' +
                            '<div class="dates day"> <span>9</span></div>' +
                            '<div class="dates day"> <span>10</span></div>' +
                            '<div class="dates day"><span>11</span></div>' +
                            '<div class="dates day"><span>12</span></div>' +
                            '<div class="dates day"><span>13</span></div>' +
                            '<div class="dates day"><span>14</span></div>' +
                            '<div class="dates day"><span>15</span></div>' +
                            '<div class="dates day"><span>16</span></div>' +
                            '<div class="dates day"><span>17</span></div>' +
                            '<div class="dates day"><span>18</span></div>' +
                            '<div class="dates day"><span>19</span></div>' +
                            '<div class="dates day"><span>20</span></div>' +
                            '<div class="dates day asingle"><span>21</span></div>' +
                            '<div class="dates day"><span>22</span></div>' +
                            '<div class="dates day"><span>23</span></div>' +
                            '<div class="dates day"><span>24</span></div>' +
                            '<div class="dates day"><span>25</span></div>' +
                            '<div class="dates day"><span>26</span></div>' +
                            '<div class="dates day"><span>27</span></div>' +
                            '<div class="dates day"><span>28</span></div>' +
                            '<div class="dates day"><span>29</span></div>' +
                            '<div class="dates day"><span>30</span></div>' +
                            '<div class="dates"> <span>1</span></div>' +
                            '<div class="dates"><span>2</span></div>' +
                            '</div>' +
                            '</div>' +
                            '<div class="operation-box">' +
                            '<button class="btn">Cancel</button>' +
                            '<button class="btn apply">Apply</button>' +
                            '</div>' +
                            '</div>' +
                            '</div>'

                        },]
                },


            ],
            otheruielements: [
                {
                    name: 'Set Columns',
                    list: [
                        {
                            lable: 'Set Columns',
                            height: '400px',
                            html: '<button class="unis-btn unis-btn-set-columns">' +
                            'Set Columns' +
                            '</button>'
                        }, {
                            lable: 'Set Columns',
                            height: '400px',
                            html: '<button class="unis-btn unis-btn-set-columns">' +
                            'Set Columns' +
                            '<div class="ui-box">' +
                            '<label>' +
                            'Customize Table ' +
                            '</label>' +
                            '<ul>' +
                            '<li>' +
                            '<div class="unis-checkbox ">' +
                            '<input type="checkbox" name="1" id="ch1">' +
                            '<label class="unis-checkbox-style" for="ch1">' +
                            '</label>' +
                            '<span >Column One</span>' +
                            '</div>' +
                            '</li>' +
                            '<li>' +
                            '<div class="unis-checkbox ">' +
                            '<input type="checkbox" name="1" id="ch2">' +
                            '<label class="unis-checkbox-style" for="ch2">' +
                            '</label>' +
                            '<span >Column One</span>' +
                            '</div>' +
                            '</li>' +
                            '<li>' +
                            '<div class="unis-checkbox ">' +
                            '<input type="checkbox" name="1" id="ch3">' +
                            '<label class="unis-checkbox-style" for="ch3">' +
                            '</label>' +
                            '<span >Column One</span>' +
                            '</div>' +
                            '</li>' +
                            '<li>' +
                            '<div class="unis-checkbox ">' +
                            '<input type="checkbox" name="1" id="ch4" Disabled>' +
                            '<label class="unis-checkbox-style" for="ch4">' +
                            '</label>' +
                            '<span >Column One</span>' +
                            '</div>' +
                            '</li>' +
                            '<li>' +
                            '<div class="unis-checkbox ">' +
                            '<input type="checkbox" name="1" id="ch5" checked  Disabled>' +
                            '<label class="unis-checkbox-style" for="ch5">' +
                            '</label>' +
                            '<span >Column One</span>' +
                            '</div>' +
                            '</li>' +
                            '</ul>' +

                            '<div class="operation-box">' +
                            '<div class="btn">Cancel</div>' +
                            '<div class="btn save">Save</div>' +
                            '</div>' +
                            '</div>' +
                            '</button>'
                        },]
                },
                {
                    name: 'Modal',
                    list: [
                        {
                            lable: 'Modal (style="position:absolute")Remove when applied',
                            height: '400px',
                            html: ' <div class="unis-popup-win" style="position:absolute">' +
                            ' <div class="position-re">' +
                            '<div class="modification">' +
                            '<div class="title">Modal Title</div>' +
                            '<div class="content">Positive Cta Button Size Will Vary By Button Text.  Modal Will Appear  Over A Black Background Overlay At 25%.<br>' +
                            '<div class="alert alert-primary" role="alert">' +
                            'Remove When Applied(style="position:absolute")' +
                            '</div>' +
                            '</div>' +
                            '<div class="bottom_box">' +
                            ' <button class="unis-btn unis-btn-tertiary">Cancel</button>' +
                            ' <button class="unis-btn unis-btn-primary">Continue</button>' +
                            ' </div>' +
                            ' </div>' +
                            ' </div>' +
                            ' </div>'
                        },]
                },


            ],
            tables: [
                {
                    name: 'Single File Uploader ',
                    list: [{
                        lable: 'Table  ',
                        html: '<table class="table unis-table  table-striped">' +
                        '<thead>' +
                        '<tr>' +
                        '<th scope="col">Column One <i class="unis-nabla blue"></i></th>' +
                        '<th scope="col">Column Two</th>' +
                        '<th scope="col">Column Three</th>' +
                        '<th scope="col">Column Four</th>' +
                        '<th scope="col">Column Five</th>' +
                        '<th scope="col">Column Six</th>' +
                        '<th scope="col">Column Six</th>' +
                        '<th scope="col">Column Seven</th>' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody>' +
                        '<tr>' +
                        '<th scope="row">Turnbull</th>' +
                        '<td class="blue">RN-1947</td>' +
                        '<td><span class="unis-labels solid">NEW</span></td>' +
                        '<td>2500175724</td>' +
                        '<td>02/09/2019 12:00 AM</td>' +
                        '<td>158</td>' +
                        '<td>CCTU123456</td>' +
                        '<td>SB Freight</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<th scope="row">Turnbull</th>' +
                        '<td class="blue">RN-1947</td>' +
                        '<td><span class="unis-labels border-blue">OPEN</span></td>' +
                        '<td>2500175724</td>' +
                        '<td>02/09/2019 12:00 AM</td>' +
                        '<td>158</td>' +
                        '<td>CCTU123456</td>' +
                        '<td>SB Freight</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<th scope="row">Turnbull</th>' +
                        '<td class="blue">RN-1947</td>' +
                        '<td><div class="unis-labels border-red">REJECTED</div></td>' +
                        '<td>2500175724</td>' +
                        '<td>02/09/2019 12:00 AM</td>' +
                        '<td>158</td>' +
                        '<td>CCTU123456</td>' +
                        '<td>SB Freight</td>' +
                        '</tr>' +
                        '</tbody>' +
                        '</table>'
                    }]
                },
                {
                    name: 'Sort Function',
                    list: [{
                        lable: '  ',
                        html: '<div class="d-flex flex-row section">' +
                        '<div class="col-2">Activated</div>' +
                        '<div class="col-10 ">' +
                        '<label class="unis-switch">' +
                        '<input type="checkbox" name="switch" checked >' +
                        '<span class="unis-switch-style"></span>' +
                        '<span >Sort</span>' +
                        '</label>' +
                        '</div>' +
                        '</div>' +
                        '<div class="d-flex section white primary-bg-50">' +
                        'Drag A Column Header And Drop It Here To Group By That Column' +
                        '</div>' +
                        '<table class="table unis-table  table-striped">' +
                        '<thead>' +
                        '<tr>' +
                        '<th scope="col">Column One <i class="unis-nabla blue"></i></th>' +
                        '<th scope="col">Column Two</th>' +
                        '<th scope="col">Column Three</th>' +
                        '<th scope="col">Column Four</th>' +
                        '<th scope="col">Column Five</th>' +
                        '<th scope="col">Column Six</th>' +
                        '<th scope="col">Column Six</th>' +
                        '<th scope="col">Column Seven</th>' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody>' +
                        '<tr>' +
                        '<th scope="row">Turnbull</th>' +
                        '<td class="blue">RN-1947</td>' +
                        '<td><span class="unis-labels solid">NEW</span></td>' +
                        '<td>2500175724</td>' +
                        '<td>02/09/2019 12:00 AM</td>' +
                        '<td>158</td>' +
                        '<td>CCTU123456</td>' +
                        '<td>SB Freight</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<th scope="row">Turnbull</th>' +
                        '<td class="blue">RN-1947</td>' +
                        '<td><span class="unis-labels border-blue">OPEN</span></td>' +
                        '<td>2500175724</td>' +
                        '<td>02/09/2019 12:00 AM</td>' +
                        '<td>158</td>' +
                        '<td>CCTU123456</td>' +
                        '<td>SB Freight</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<th scope="row">Turnbull</th>' +
                        '<td class="blue">RN-1947</td>' +
                        '<td><div class="unis-labels border-red">REJECTED</div></td>' +
                        '<td>2500175724</td>' +
                        '<td>02/09/2019 12:00 AM</td>' +
                        '<td>158</td>' +
                        '<td>CCTU123456</td>' +
                        '<td>SB Freight</td>' +
                        '</tr>' +
                        '</tbody>' +
                        '</table>'
                    }]
                },
                {
                    name: 'In use ',
                    list: [{
                        lable: ' &nbsp; ',
                        html:
                        '<div class="d-flex section white primary-bg-50"> ' +
                        '<div class="unis-tags accents-bg-50 blue">Column One' +
                        '<i class="unis-cross accents-bg white"></i>' +
                        '</div>' +
                        '<div class="unis-tags accents-bg-50 blue">Column One' +
                        '<i class="unis-cross accents-bg white"></i>' +
                        '</div>' +
                        '<div class="unis-tags accents-bg-50 blue">Column One' +
                        '<i class="unis-cross accents-bg white"></i>' +
                        '</div>' +
                        '</div>' +
                        '<table class="table unis-table  table-striped">' +
                        '<thead>' +
                        '<tr>' +
                        '<th scope="col">' +
                        'Column One' +
                        ' <i class="unis-nabla blue"></i>' +
                        '</th>' +
                        '<th scope="col">Column Two</th>' +
                        '<th scope="col">Column Three</th>' +
                        '<th scope="col">Column Four</th>' +
                        '<th scope="col">Column Five</th>' +
                        '<th scope="col">Column Six</th>' +
                        '<th scope="col">Column Six</th>' +
                        '<th scope="col">Column Seven</th>' +
                        '</tr>' +
                        '</thead>' +
                        '<tbody>' +
                        '<tr>' +
                        '<td class="sort" colspan="8">' +
                        '<div class="sort-title">' +
                        '<div>' +
                        '<i class="unis-nabla-right gray"></i>' +
                        '</div>' +
                        '<div>' +
                        'Column One: Turnbull, ' +
                        '</div>' +
                        '</div>' +
                        '<div class="row sort-box">' +
                        '<table class="table unis-table">' +
                        '<tbody>' +
                        '<tr>' +
                        '<td scope="row">Turnbull</td>' +
                        '<td class="blue">RN-1947</td>' +
                        '<td><span class="unis-labels border-blue">OPEN</span></td>' +
                        '<td>2500175724</td>' +
                        '<td>02/09/2019 12:00 AM</td>' +
                        '<td>158</td>' +
                        '<td>CCTU123456</td>' +
                        '<td>SB Freight</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td scope="row">Turnbull</td>' +
                        '<td class="blue">RN-1947</td>' +
                        '<td><span class="unis-labels border-blue">OPEN</span></td>' +
                        '<td>2500175724</td>' +
                        '<td>02/09/2019 12:00 AM</td>' +
                        '<td>158</td>' +
                        '<td>CCTU123456</td>' +
                        '<td>SB Freight</td>' +
                        '</tr>' +
                        '</tbody>' +
                        '</table>'+
                        '</div>' +
                        '</td>' +
                        '</tr>' +
                        '<tr>' +
                        '<td class="sort" colspan="8">' +
                        '<div class="sort-title">' +
                        '<div>' +
                        '<i class="unis-nabla gray"></i>' +
                        '</div>' +
                        '<div>' +
                        'Column One: Turnbull ' +
                        '</div>' +
                        '</div>' +
                        '</td>' +
                        '</tr>' +
                        '</tbody>' +
                        '</table>'
                    }]
                },

            ],
        }

    })
    ;
</script>
<script>
    $(document).ready(function () {

        $(function () {
            $("#subBtn").trigger("click");
        });

        var navHeight = $("#navHeight").offset().top;
        var navFix = $("#nav-wrap");
        $(window).scroll(function () {
            if ($(this).scrollTop() > navHeight) {
                navFix.addClass("navAside");
            }
            else {
                navFix.removeClass("navAside");
            }
            $('.clearfix').css("display", "none");
            $('.active').parents("ul").css("display", "block");
        })
    });
    $('.nav-wrap').navScroll({
        mobileDropdown: false,
        mobileBreakpoint: 10,
        scrollSpy: true
    });
    $('.nav-wrap').on('click', '.nav-Form', function (e) {
        e.preventDefault();
        $(this).next("ul").slideToggle('fast');
    });

</script>

<script>
    var opts = {
        'indent_size': 4,
        'indent_char': ' ',
        'max_char': 300,
        'brace_style': 'expand',
    }
    var source = document.getElementsByClassName('code');
    for (var i = 0; i < source.length; i++) {
        source[i].innerHTML = style_html(source[i].innerHTML, opts).replace(/</g, "&lt;");
    }

</script>
<script>
    hljs.initHighlightingOnLoad();
</script>

</body>
</html>

